{% if comments %}
共 {{ article.comments.count }} 条评论
<!-- 父评论列表 -->
{% for comment in comments %}
<div class="card mt-1">
    <div class="card-body" id="comment-{{ comment.id }}">
        <p class="card-text">{{ comment.content }}</p>
        <p class="card-text d-flex justify-content-between align-items-center">
            <small class="text-muted">
                {{ comment.author }} 评论于 {{ comment.create_at|date:"Y-m-j H:i:s" }}
            </small>
            <a href="#comment-input" class="link-secondary"
                onclick="setReplyTo({{ comment.id }}, '{{ comment.author }}')">回复</a>
        </p>

        <!-- 子评论列表 -->
        {% if comment.child_comments.all %}
        <div class="ms-4">
            {% for sub_comment in comment.child_comments.all %}
            <div class="card mt-1" id="comment-{{ sub_comment.id }}">
                <div class="card-body">
                    <p class="card-text">{{ sub_comment.content }}</p>
                    <p class="card-text d-flex justify-content-between align-items-center">
                        <small class="text-muted">
                            {{ sub_comment.author }} 于 {{ sub_comment.create_at|date:"Y-m-j H:i:s" }}
                            回复 {{ sub_comment.reply_to.author }}
                        </small>
                        <a href="#comment-input" class="link-secondary"
                            onclick="setReplyTo({{ sub_comment.id }}, '{{ sub_comment.author }}')">回复</a>
                    </p>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>
{% endfor %}
{% else %}
<p class="text-muted">暂无评论，快来发表你的看法吧！</p>
{% endif %}